import LinkCardItem from './LinkCardItem';
import {Card,Icon} from 'antd';
import isEqual from 'lodash/isEqual';
import * as mobx from 'mobx'
import { WeaHelpfulTip } from "ecCom";

//import { observer} from 'mobx-react';
//
//@observer
class MLinkCard extends React.Component {
	shouldComponentUpdate(nextProps) {
		const _c = !isEqual(mobx.toJS(this.props.types), mobx.toJS(nextProps.types));
		const _e = !isEqual(mobx.toJS(this.props.importDataShow), mobx.toJS(nextProps.importDataShow)); 
        return _c || _e || this.props.isAbc !== nextProps.isAbc
			|| !isEqual(this.props.wfOperateInfo,nextProps.wfOperateInfo);
    }
	render() {
		const {types,importDataShow,isAbc,wfOperateInfo,actions,user,cardItemParams,wfTypeTips} = this.props;
		return (
			<div>
			{
           		types.map((type,i)=>{
           			const {wfbeans,img,color,letter,selected,typeName,id} = type;
					const icontype ="icon-base " +img;
					return (
						<Card ecId={`${this && this.props && this.props.ecId || ''}_Card@tlckyp@${i}`} id={letter} style={selected ? {"border-top-color":color,background:'#fff',boxShadow:'0 1px 6px hsla(0,0%,39%,.2)'} : {"border-top-color":color}}>
				 			<div style={{padding:'5px 0 25px 0',textAlign:'center'}}>
								{isAbc ?
									<span style={{fontSize:26,color:color}}>{letter}</span>
									:
									<div className="wf-card-type-name">
										<span style={{color:color,fontSize:26,marginRight:10}}><i className={icontype}/></span>
										<span style={{height:36,lineHeight:'36px'}}>{typeName}{wfbeans && ('(' + wfbeans.length + ')')}</span>
										{
											wfTypeTips[id] 
											? 
											<span style={{height:36,lineHeight:'36px'}}>
												<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@2c6fwi`} style={{ marginLeft: '10px',  display: 'inline-block', lineHeight: '36px' }}  title={<div dangerouslySetInnerHTML={{ __html: wfTypeTips[id] }}/>}/>   
											</span> 
											: ''
										}
									</div>
								}
							</div>
							{
								wfbeans.map((obj,i)=><LinkCardItem ecId={`${this && this.props && this.props.ecId || ''}_LinkCardItem@xzd9bm@${i}`} cardItemParams={cardItemParams} user={user} wfbean={obj} importDataShow={importDataShow} iscommon={false} wfOperateInfo={wfOperateInfo} actions={actions} />)
							}
						</Card>
					)
           		})
            }
			</div>
		)
	}
}

export default MLinkCard
